<template>
  <div class="home">
    <router-link to="/lifeCycle">LyfeCycle</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/store">Store</router-link>
    |<router-link to="/teleport">Teleport</router-link> |
    <router-link to="/suspense">Suspense</router-link>|
    <router-link to="/provideInject">ProvideInject</router-link>
    <div>
      <router-view v-slot="{ Component }">
        <!-- 缓存页面 -->
        <keep-alive :include="['Store', 'About', 'Suspense']">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  components: {}
})
</script>
<style lang="scss">
a {
  font-weight: bold;
  color: #2c3e50;

  &.router-link-exact-active {
    color: #42b983;
  }
}
</style>
